@time: 500ms;

.mini-list--mark {
  position: absolute;
  z-index: 2000;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.mini-list--container {
  position: absolute;
  z-index: 2010;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  padding: 0 15px;
  width: calc(100% - 20px);
  height: 400px;
  border-radius: 20px;
  box-sizing: border-box;

  background-color: rgb(38, 38, 38);
}

.mini-list--title {
  // display: flex;
  // justify-content: space-between;
  padding: 15px 0;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
}

.transition-enter {
  z-index: 2000;
  opacity: 1;
  transform: translate(-50%, 100%);
}

.transition-enter-active {
  z-index: 2000;
  opacity: 1;
  transform: translate(-50%, 0);
  transition: all @time;
}

.transition-enter-done {
  z-index: 2000;
  opacity: 1;
  transform: translate(-50%, 0);
}

.transition-exit {
  z-index: 2000;
  opacity: 1;
  transform: translate(-50%, 0);
}

.transition-exit-active {
  z-index: 2000;
  opacity: 1;
  transform: translate(-50%, 100%);
  transition: all @time;
}

.transition-exit-done {
  z-index: 2000;
  opacity: 1;
  transform: translate(-50%, 100%);
}
